<template>
    <div class="userlist">
        <el-card shadow="always">
            <div class="data-list">
                <div class="left">
                    <el-icon size="16">
                        <Tickets />
                    </el-icon>
                    <span>数据列表</span>
                </div>
                <div class="right">
                    <el-button type="primary" @click="onAddUser">添加</el-button>
                </div>
            </div>
        </el-card>
        <!-- 用户表格 -->
        <div class="list">
            <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" border>
                <el-table-column type="selection" width="55" />
                <el-table-column label="编号" width="120" prop="id">
                </el-table-column>
                <el-table-column property="name" label="品牌名称" width="120" prop="name" />
                <el-table-column property="dasdad" label="商品类型" show-overflow-tooltip>dasdad</el-table-column>
                <el-table-column property="address" label="属性是否可选" prop="sort" show-overflow-tooltip>唯一</el-table-column>
                <el-table-column property="address" label="属性值的录入方式" show-overflow-tooltip>
                    手工录入
                </el-table-column>
                <el-table-column label="可选值列表" width="120">
                </el-table-column>
                <el-table-column label="排序" width="180">
                    <span>0</span>
                </el-table-column>
                <el-table-column label="操作" width="140">
                    <template #default="scope">
                        <el-button size="small" @click="onEdit(scope.row.id)">编辑</el-button>
                        <el-button type="danger" size="small" @click="DeleteItem(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination">
            <!-- 分页器 -->
            <div class="fengye">
                <el-form-item style="margin-right: 15px; margin-top: 15px;">
                <el-select v-model="form1.date" placeholder="批量操作">
                <el-option label="删除" value="0" />
                </el-select>
             </el-form-item>  
            <div style="margin: 15px">  
                 <el-button type="primary">确定</el-button>  
            </div> 
            </div>
            <div style="float: right; margin-top: 15px;">
            <el-pagination v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize" background
                :page-sizes="[1, 5, 10, 20]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>    
        </div>
       
    </div>
</template>
  
<script setup lang="ts">
import { ref, watchEffect } from "vue";
import type { Ref } from "vue";
import * as api from "../../request/api";
import useTable from "../../hooks/useTables";
import dayjs from "dayjs";
import { ElMessage, ElMessageBox } from "element-plus";
import { IAdminListItem, IRoleListItem, createItem } from '../../request/QmsAdminConreillerA/index';
import { useRouter, useRoute } from "vue-router";
import { ElTable } from 'element-plus'
import { reactive } from 'vue'
const form1 = reactive({
    date: '',
})
const value1 = ref(true)
// 使用路由函数
const router = useRoute();
const route = useRouter()
let form = {
    id: router.query.id
   
}

//分配角色点击事件
const btn = (i: any) => {
    // router.push({
    //   path: "/ums/DistributionMenu",
    //   query: {
    //     id: i,
    //   },
    // });
    route.push({
        path: "/ums/allocMenu",
        query: {
            id: i,
        },
    })
};
let DeleteItem = async (data: number) => {
    ElMessageBox.confirm(
        '是否确认提交!', "提示",
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async (add) => {
            if (add) {
                await api.adminA.adminDeleteForm(data) //删除
            }
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消提交',
            })
        })
    

}
//分配资源的点击使事件
const btnClick = (i: any) => {
    route.push({
        path: "/ums/allocResource",
        query: {
            id: i,
        },
    });

};
// 搜索框数据
let name = ref("");
// false编辑，true新增
let add = false;
let modalForm = ref({}) as Ref<IAdminListItem>;

let {
    tableData,
    getTableData,
    pagination,
    handleSizeChange,
    handleCurrentChange,
} = useTable(api.adminA.AttributeList, {
    cid: router.query.cid, //name是响应式的
    type: router.query.type
});

// 添加角色对话框显示隐藏判断
let visible = ref(false);

// 添加用户
let onAddUser = () => {
    route.push("/pms/addProductAttr")
    // console.log(123);
    // visible.value = true;
    // add = true;
};
// 编辑
let onEdit = async (id: number) => {
    route.push(`/pms/updateProductAttr?id=${id}`)
    // name.value = "超级管理员";
};


</script>
  
<style lang="scss" scoped>
.userlist {
    color: #303133;

    .bread {
        padding-bottom: 20px;
        border-bottom: 1px solid #eee;
    }

    .search {
        margin: 20px 0;
        padding: 20px;
        border: 1px solid #ebeef5;
        border-radius: 4px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        font-size: 14px;

        .search-top {
            display: flex;
            justify-content: space-between;

            .left {
                // float: left;
                width: 18%;

                .el-icon {
                    padding-right: 10px;
                }

                .el-button {
                    font-size: 14px;
                }
            }
        }

        .search-bottom {
            display: flex;
            justify-content: flex-start;
            overflow: hidden;
            padding: 20px 40px 0;

            .search-name {
                line-height: 34px;
                padding-right: 10px;
            }
        }

        .el-input {
            width: 200px;
            font-size: 14px;
        }
    }

    .el-card {
        .data-list {
            display: flex;
            justify-content: space-between;

            .left {
                .el-icon {
                    padding-right: 10px;
                }
            }
        }
    }

    .list {
        margin: 20px 0;
    }

    
}

:deep .cell {
    text-align: center;
}
.pagination {
    display: flex;
    justify-content: space-between;
}
.fengye{
    display: flex;
    justify-content: space-between;
}
</style>
  